//当前展示的图片的索引
var currPage = 0;
//需要用到的元素的对象
const banner = document.querySelector(".banner"); //整个banner盒
const bannerMain = document.querySelector(".banner-main");//banner放图片的
//  切换按钮
const banBtn = document.querySelector('.banner-btn');
const last = document.querySelector(".last");
const next = document.querySelector(".next");

const circle = document.getElementsByClassName('circle');
//圆圈等
const circleItem = circle[0].getElementsByTagName('li');
//  console.log(circle);
//  console.log(circleItem);

//下一张
next.onclick = function(){
  currPage++;
  bannerMain.style.left = -currPage * 1220 + "px";
  if(currPage >= circleItem.length){
    currPage = 0;
    bannerMain.style.left = "0px"
  }
  cirChange(currPage);
}
//上一张
last.onclick = function(){
  currPage--;
  bannerMain.style.left = -currPage * 1220 + "px";
  if(currPage < 0){
    currPage = circleItem.length - 1;
    bannerMain.style.left = "-2440px"
  }
  cirChange(currPage);
}
// 自动轮播功能
const time = setInterval(() =>{
  next.onclick();
},10000);
// 图片跳转
function clickDot(index){
  bannerMain.style.left = -index * 1220 + "px";
  currPage = index;
  cirChange(index)
}
//圆圈跟图片一起变
function cirChange(index){
  for(let i = 0 ; i < circleItem.length; i++){
    circleItem[i].style.opacity = 0.5;
  }
  circleItem[index].style.opacity = 1;
}

// banner.addEventListener('')
// 鼠标进入/离开时按钮显示与隐藏
banner.addEventListener('mouseover', bannerMouseOver)
banner.addEventListener('mouseout', bannerMouseOut)
function bannerMouseOver() {
  // console.log('鼠标经过');
  banBtn.style.display = 'block';
}
function bannerMouseOut() {
  // console.log('鼠标移出');
  banBtn.style.display = 'none';
}